<template>
  <view class="container">
    <view class="avatar">
      <image src="/static/images/user-circle.png"></image>
    </view>

    <view class="form">
      <uv-form
        labelPosition="left"
        :model="business"
        :rules="rules"
        ref="uForm"
      >
        <uv-form-item label="手机" prop="mobile" borderBottom>
          <uv-input
            type="text"
            v-model="business.mobile"
            border="none"
            placeholder="请输入手机号"
          ></uv-input>
        </uv-form-item>

        <uv-form-item label="密码" prop="password" borderBottom>
          <uv-input
            type="password"
            v-model="business.password"
            border="none"
            placeholder="请输入密码"
          ></uv-input>
        </uv-form-item>

        <view style="margin-top: 25px">
          <uv-button type="warning" @click="onSubmit">绑定</uv-button>
        </view>
      </uv-form>
    </view>

    <view class="agreement">
      <uv-checkbox-group v-model="agreementStatus">
        <uv-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
        <navigator class="url" url="/pages/business/agreement"
          >用户服务协议、隐私政策</navigator
        >
      </uv-checkbox-group>
    </view>

    <!-- 信息提示 -->
    <uv-toast ref="NoticeRef"></uv-toast>
  </view>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据---对象结构
const business = reactive({
  mobile: "",
  password: "",
});
// 表格
const uForm = ref(null);
// 提示信息
const NoticeRef = ref(null);
// 验证规则
const rules = reactive({
  mobile: [
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$uv.test.mobile()就是返回true或者false的
        if (value) {
          return uni.$uv.test.mobile(value);
        } else {
          return false;
        }
      },
      type: "string",
      required: true,
      message: "手机号码不正确",
      // 触发器可以同时用blur和change
      trigger: ["change", "blur"],
    },
  ],
  password: [
    {
      type: "string",
      required: true,
      message: "请填写密码",
      trigger: ["blur", "change"],
    },
  ],
});
// 服务协议状态
const agreementStatus = ref([]);
// openid
const openid = ref("");

// 页面生命周期
onLoad((params) => {
  openid.value = params.openid ?? "";
});

// 提交功能
const onSubmit = () => {
  uForm.value
    .validate()
    .then(async () => {
      if (agreementStatus.value.length === 0) {
        NoticeRef.value.show({
          type: "error",
          message: "请同意服务协议",
        });
        return false;
      }
      // 组装数据
      const params = {
        ...business, // 手机号和密码
        openid: openid.value,
      };
      // 发起请求
      const result = await uni.$uv.http.post("/business/bind", params);
      // 处理请求结果
      if (result.code === 1) {
        // 轻提示
        NoticeRef.value.show({
          type: "success",
          message: result.msg,
          // 提示完执行回调函数
          complete: () => {
            uni.$uv.route({
              type: "navigateBack",
            });
          },
        });
      } else {
        NoticeRef.value.show({
          type: "error",
          message: result.msg,
        });
      }
    })
    .catch((err) => {});
};
</script>

<style>
page {
  background-color: #f8fafe;
}

.container .avatar {
  text-align: center;
  background-color: #fff;
  padding-bottom: 20px;
}

.avatar image {
  width: 80px;
  height: 80px;
  margin: 50px 0 20px;
}

.form {
  margin: 0 50rpx;
  box-sizing: border-box;
}

.btn {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #ifdef H5 || APP-PLUS */
.u-icon {
  margin-left: 10px;
}
/* #endif */

.agreement {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  font-size: 14px;
}

navigator {
  color: #33ccff;
}

:deep(.uv-checkbox-group--row) {
  justify-content: center;
}
</style>